<template>
    <div>

      <header-top :title="title" >
        <div @click="$router.back()" class="back" slot="back"></div>
      </header-top>



      <div style="background: #f8f8f8" class="content clearfix">

        <teacher-class v-if="show" @data = 'getList' />


        <!--    内容区开始      -->
        <div class="noticeListBox">
          <router-link v-for="(notice,index) of noticeList" :key="notice.noticeId"
                       :to="{path:'/class/noticeDetail',query:{id:notice.noticeId,type:type}}">
            <div class="notice-time">{{notice.createTime.slice(0,10)}}</div>
            <div class="notice-list">
              <div class="notice-img notice-school"></div>
              <div class="notice">
                <h3>{{notice.title}}</h3>
                <p>{{notice.context.replace(/<[^>]+>/g,"").slice(0,30)}}... </p>
              </div>
            </div>
          </router-link>
        </div>






        <!--    内容区结束      -->
      </div>

    </div>
</template>

<script>
  import headerTop from "@/components/headerTop/headerTop";
  import teacherClass from "@/components/teacherClass/teacherClass";
  import Swiper from 'swiper'
  import 'swiper/dist/css/swiper.min.css'
  import {mapState} from 'vuex'
  import { Toast } from 'vant';   //使用消息提示
  import {reqNoticePay, reqNoticeClass, reqNoticeSchool} from "@/api";

  export default {
      name: "school",
      data(){
        return{
          noticeList:null,
          type:null,
          title:null,
          show:true,
        }
      },
    components:{
      headerTop:headerTop,
      teacherClass:teacherClass,
    },
      created(){
        this.type = this.$route.query.type
        if(this.type === 'CLASS'){
          this.title = '班级通知'
        }else if(this.type === 'PAY'){
          this.title = '缴费通知'
        }else if(this.type === 'SCHOOL'){
          this.title = '学校通知'
          this.show = false
        }

        let classId = this.$store.state.teacherClass[0].id
        let data = {classId:classId}
        this.getList(data)

      },
      mounted() {
        new Swiper('#roll',{
          slidesPerView:3,
        })
      },
      computed:{
        ...mapState(['teacherClass'])  //vuex 储存数据
      },
    methods:{
      async getList(data) {
       if(this.type === 'CLASS'){
         let notices = await reqNoticeClass(data.classId)
         this.noticeList = notices.data
       }else if(this.type === 'PAY'){
         let notices = await reqNoticePay(data.classId)
         this.noticeList = notices.data
       }else if(this.type === 'SCHOOL'){
         let notices = await reqNoticeSchool()
         this.noticeList = notices.data
       }

       if(this.noticeList.length == '0'){
         Toast('还没有发布通知')
       }

      }
    }

    }
</script>

<style scoped>
  .noticeListBox{ margin-top: 1rem;}
  .notice-time{width: 9rem; height: 1.4rem; border-radius:0.7rem;; background: #d3d3d3; color: #fff; font-size: 1rem; text-align: center; line-height: 1.4rem; margin: 0 auto 1rem;}
  .notice-list{ width: 25rem; height: 8.5rem; margin: 0 auto 1.3rem; border-radius: 0.5rem; background: #fff;}
  .notice-img{ width: 2.375rem; height: 2.375rem; float: left; margin:2.325rem 0 0 1.05rem;background-size:2.375rem !important; }
  .notice{ width: 19.5rem; float: right; margin:1.725rem 1.1rem 0 0; }
  .notice h3{ font-size:1.05rem; height: 1.05rem; line-height: 1.05rem; margin-bottom: 0.95rem; color:#333;}
  .notice p{font-size: 1.05rem; color: #666; line-height: 1.5rem;}
  .notice-school{background: url(images/notice-school.png) no-repeat center; }


</style>
